<template>
  <div class="page-list-live">
    <PageList>
      <template #header>员工管理</template>
      <template #filter>
        <ListFilter ref="ListFilter" :form="topFilter" :key-list="keyList" @search="handleSearch" @reset="handleReset"></ListFilter>
      </template>
      <template #tips>
        <el-button icon="el-icon-delete" style="margin-bottom: 10px !important;" type="danger" @click="batchDeletion">批量删除</el-button>
        <el-button icon="el-icon-document-add" type="primary" @click="handleAdd">新增</el-button>
        <el-button icon="el-icon-document-add" type="primary" @click="addHandle">自定义表头</el-button>
        <el-button icon="el-icon-folder-add" type="primary" @click="clickUpload">批量导入</el-button>
        <el-button icon="el-icon-folder-remove" type="primary" @click="handleOut">批量导出</el-button>
        <a :href="imgUrl + '/files/employees.xlsx?v=2'" target="_self" class="download">
          <i class="el-icon-folder-remove"></i>下载模板
        </a>
        <el-button icon="el-icon-picture-outline" type="primary" @click="addHeadPortrait">导入头像</el-button>
        <el-button icon="el-icon-download" type="primary" @click="selectSyncDeviceHandler">从人脸设备导入</el-button>
        <el-upload
          ref="imgRef"
          style="display: inline-block;margin: 0 10px;"
          class="upload-demo"
          action
          :http-request="uploadFile"
          :headers="{
            Authorization: `Bearer ${$store.getters.token}`
          }"
          :before-upload="beforeAvatarUpload"
          :show-file-list="false"
        >
          <el-button icon="el-icon-folder-add" type="primary">手动导入共享包</el-button>
        </el-upload>
      </template>
      <template #table>
        <ListTable ref="RefListTable" :loading="tableLoading" :table-data="tableData" :table-col="tabList" @selectChange="handleSelectionChange">
          <template slot="col2" slot-scope="stData">
            <div>
              <p v-if="!stData.row.photo&&!stData.row.faceDetectPhoto1">未上传</p>
              <el-image
                v-else
                style="height: 100px; width: 80px;"
                :src="!stData.row.photo?'data:image/jpg;base64,'+stData.row.faceDetectPhoto1:stData.row.photo"
                :preview-src-list="[!stData.row.photo?'data:image/jpg;base64,'+stData.row.faceDetectPhoto1:stData.row.photo]"
              ></el-image>
            </div>
          </template>
          <template slot="col1" slot-scope="scope">
            <div class="btn-nav">
              <el-button
                icon="el-icon-platform-eleme"
                :loading="scope.row.loadingEdit"
                :disabled="scope.row.status === '0'"
                size="mini"
                style="margin-left: 0px; margin-right: 10px;"
                type="text"
                @click="setEmployeeHandle(scope.row, scope.row.isEnable)"
              >{{ scope.row.isEnable ? '禁用' : '启用' }}</el-button>
              <el-button
                v-if="scope.row.status === '1'||scope.row.status==='在职'"
                icon="el-icon-error"
                :loading="loadingquit"
                size="mini"
                style="margin-left: 0px; margin-right: 10px;"
                type="text"
                @click="quitHandle(scope.row)"
              >离职</el-button>
            </div>
            <div class="btn-nav">
              <el-button
                icon="el-icon-edit"
                :loading="scope.row.loadingEdit"
                size="mini"
                style="margin-left: 0px; margin-right: 10px;"
                type="text"
                @click="handleRowEdit(scope.row)"
              >编辑</el-button>
              <el-button
                :loading="scope.row.loadingDel"
                size="mini"
                icon="el-icon-delete"
                style="color: red; margin-left: 0px; margin-right: 10px;"
                type="text"
                @click="handleRowDel(scope.row)"
              >删除</el-button>
            </div>
          </template>
        </ListTable>
      </template>
    </PageList>
    <!-- 新增员工组件 -->
    <AddStaff ref="RefAccountsEdit" @photograph="photograph" @selectDeviceHandler="selectDeviceHandler" @success="afterEditSuccess"></AddStaff>
    <!-- 导入头像组件 -->
    <HeadPortrait ref="HeadPortrait" @onsuccess="importHeadSuccess"></HeadPortrait>
    <!-- 选择列表字段组件 -->
    <ListFields ref="ListFields" @setTableCol="setTableColHandler"></ListFields>
    <Photograph ref="Photograph"></Photograph>
    <SelectDevice ref="SelectDevice"></SelectDevice>
    <uploadComponent ref="uploadComponent" @success="afterEditSuccess"></uploadComponent>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import SelectDevice from './components/SelectDevice'
  import AddStaff from './components/AddStaff'
  import HeadPortrait from './components/HeadPortrait'
  import Photograph from './components/Photograph'
  import uploadComponent from './components/uploadComponent'
  import ListFields from './components/ListFields'
  import ListFilter from '@/components/ListFilter'
  import { getToken } from '@/utils/auth' // get token from cookie
  // import { assetsImages } from '@/utils/images.js'
  import {
    employee,
    setEmployee,
    department,
    job,
    work,
    SharedPackage,
    parameter,
    // files,
    // employees,
    // employeeExport,
    quitEmployee
  } from '@/api/api'
  // import xlsx from 'node-xlsx'
  // import fs from 'fs'
  import {
    // dirname,
    localhostUrl
  } from '@/utils/setUrl.js'
  // import { app } from "electron"
  // import { number } from 'echarts/lib/export'
  import { parseTime } from '@/utils'
  export default {
    components: {
      AddStaff,
      ListFilter,
      ListFields,
      HeadPortrait,
      Photograph,
      uploadComponent,
      SelectDevice
    },
    mixins: [listMixin],
    data() {
      return {
        loadingquit: false,
        previousQuery: {},
        imgUrl: localhostUrl,
        tableHeight: '500',
        url: localhostUrl + '/Employee/ImportEmployee',
        filename: 'employees',
        autoWidth: true,
        bookType: 'xlsx',
        timeId: '',
        // 部门
        dptList: [],
        // 职位
        jobList: [],
        // 工种
        workList: [],
        // 在职状态
        statusList: [],
        deleteList: {
          id: ''
        },
        // 查询字段
        topFilter: {
          departmentId: {
            label: '部门',
            placeholder: '请选择员工部门',
            type: 'select',
            arr: this.dptList
          },
          jobId: {
            label: '职位',
            placeholder: '请选择员工职位',
            type: 'select',
            arr: this.jobList
          },
          workId: {
            label: '工种',
            placeholder: '请选择员工工种',
            type: 'select',
            arr: this.workList
          },
          status: {
            label: '工作状态',
            placeholder: '请选择工作状态',
            type: 'select',
            arr: [
              { label: '在职', value: '1' },
              { label: '离职', value: '0' }
            ]
          },
          keyword: {
            label: '关键字',
            placeholder: '请输入员工编码或姓名、RFID、门禁ID'
          }
        },
        // 关键字查询
        keyList: [
          'employeeCode',
          'name',
          'birthday',
          'idCard',
          'phone',
          'email',
          'adress',
          'comment',
          'department.deptName',
          'job.jobTitle',
          'work.workName',
          'rfid',
          'status',
          'accessCardID'
        ],
        // 列表数据
        tableData: [],
        // 列表表头
        tableCol: [
          { type: 'selection', height: '250' },
          { prop: 'indexId', label: '序号', width: '60px' },
          { prop: 'employeeCode', label: '员工编码', align: 'center', minWidth: '120px' },
          { prop: 'name', label: '员工姓名', align: 'center', minWidth: '80px' },
          {
            prop: 'sex',
            label: '性别',
            align: 'center',
            minWidth: '54px',
            formatter(row, col, cell) {
              let sex,
                sexList = [
                  { label: '男', value: 1 },
                  { label: '女', value: 0 },
                  { label: '空', value: 2 },
                ]
              sexList.forEach(item => {
                if (item.value == cell) {
                  sex = item.label
                }
              })
              return sex
            }
          },
          {
            prop: 'birthday',
            label: '生日',
            align: 'center',
            minWidth: '96px',
            formatter(row, col, cell) {
              let date = new Date(cell)
              let year = date.getFullYear()
              let month = date.getMonth() + 1
              month = month >= 10 ? month : '0' + month
              let d1 = date.getDate()
              d1 = d1 >= 10 ? d1 : '0' + d1
              let time_str = year + '-' + month + '-' + d1
              return cell ? time_str : '--'
            }
          },
          { prop: 'idCard', label: '身份证号', align: 'center', minWidth: '166px' },
          { prop: 'phone', label: '手机号', align: 'center', minWidth: '110px' },
          { prop: 'email', label: '邮箱', align: 'center', minWidth: '180px' },
          { prop: 'adress', label: '地址', align: 'center', minWidth: '200px' },
          {
            prop: 'photo',
            label: '照片',
            custom: 'col2',
            minWidth: '80px',
            align: 'center'
          },
          {
            prop: 'departmentId',
            label: '部门',
            minWidth: '80px',
            align: 'center',
            formatter(row, col, cell) {
              return row.department ? row.department.deptName : ''
            }
          },
          {
            prop: 'jobId',
            label: '职位',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.job ? row.job.jobTitle : ''
            },
            align: 'center'
          },
          {
            prop: 'workId',
            label: '工种',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.work ? row.work.workName : ''
            },
            align: 'center'
          },
          { prop: 'rfid', label: 'RFID卡', minWidth: '80px', align: 'center' },
          { prop: 'accessCardID', label: '门禁ID', minWidth: '80px', align: 'center' },
          {
            prop: 'status',
            label: '工作状态',
            minWidth: '80px',
            formatter(row, col, cell) {
              if (row.status == '1') {
                return '在职'
              } else if (row.status == '0') {
                return '离职'
              } else {
                return row.status
              }
            },
            align: 'center'
          },
          {
            prop: 'faceDetect',
            label: '人脸识别',
            minWidth: '80px',
            formatter(row, col, cell) {
              return row.faceDetect === 1 ? '开启' : '关闭'
            },
            align: 'center'
          },
          {
            prop: 'isEnable',
            label: '门禁启用/禁用',
            minWidth: '118px',
            formatter(row, col, cell) {
              return row.isEnable ? '启用' : '禁用'
            },
            align: 'center'
          },
          { prop: 'comment', label: '备注', align: 'center', minWidth: '180px' },
          { label: '操作', custom: 'col1', align: 'center', minWidth: '108px', fixed: 'right' }
        ],
        tabList: [{ type: 'selection' }],
        tableColValue: [],
        // 启用禁用
        isEnableSwitch: false,
        downloadLoading: false,
        selectionList: []
      }
    },
    async created() {
      // 获取下拉框数据并赋值给查询组件
      
      // 查询本地存储是否有表头，查询接口是否存储了表头；如果都没有就是没有设置，没有设置就用默认的，如果接口有就用接口的，如果本地有就用本地的
      await this.getParameter((res) => {
        if (res.code === 200) {
          console.log(res)
          if (res.data.value) {
            let value = JSON.parse(res.data.value)
            this.tabList = [{ type: 'selection' }]
            this.tableCol.forEach(item => {
              let ary = value.filter(fil => {
                return fil.label == item.label
              })
              if (ary.length) {
                this.tabList.push(item)
              }
            })
            this.tableColValue = value
          } else {
            this.tabList = this.tableCol
          }
        }
        // this.threeList()
      })
      
      // 查询是否有此文件
      // fs.access(dirname + '\\tableCol.txt', (error, res) => {
      //   if (error) {
      //     // 没有文件
      //     this.tabList = this.tableCol
      //     this.tableColValue = JSON.parse(JSON.stringify(this.tableCol))
      //     // 如果没有这个文件就创建文件
      //     fs.writeFile(dirname + '\\tableCol.txt', JSON.stringify(this.tableCol), (res) => {
      //       console.log(res)
      //     })
      //   } else {
      //     // 有文件
      //     // 如果有这个文件就读取文件
      //     this.tabList = [{ type: 'selection' }]
      //     // // 读取文件获取列表表头数据
      //     fs.readFile(dirname + '\\tableCol.txt', 'utf-8', (error, res) => {
      //       if (!res) {
      //         // 文件为空重新保存
      //         this.tabList = this.tableCol
      //         this.tableColValue = JSON.parse(JSON.stringify(this.tableCol))
      //         fs.writeFile(dirname + '\\tableCol.txt', JSON.stringify(this.tableCol), (error, res) => {
      //           console.log(error, res)
      //         })
      //       } else {
      //         // 文件有内容
      //         this.tableColValue = JSON.parse(res)
      //         this.tableColValue.forEach(item => {
      //           this.tableCol.forEach(edit => {
      //             if (item.label === edit.label && item.type !== 'selection') {
      //               this.tabList.push(edit)
      //             }
      //           })
      //         })
      //       }
      //     })
      //   }
      // })
    },
    methods: {
      importHeadSuccess() {
        this.getList()
      },
      async quitHandle(row) {
        this.loadingquit = true
        try {
          let response = await quitEmployee({ employeeId: row.id })
          if (response.code !== 200) { return }
          this.getList(this.serchObj)
        } catch (err) {
          this.$message.error('离职操作失败！')
        }
        this.loadingquit = false
      },
      // 选择人脸识别设备
      selectDeviceHandler(value) {
        this.$refs.SelectDevice.open(value)
        // this.$refs.SelectDevice.initialize()
      },
      // 从人脸识别设备导入
      selectSyncDeviceHandler() {
        this.$refs.SelectDevice.open('sync')
        // this.$refs.SelectDevice.initialize()
      },
      // 拍照
      photograph(editId) {
        // if (editId) {
        //   this.$refs.Photograph.open({ status: true, id: editId })
        // } else {
        //   this.$refs.Photograph.open()
        // }
        this.$refs.Photograph.dialogVisible = true
        this.$refs.Photograph.initialize()
      },
      // 点击上传
      clickUpload() {
        this.$refs['uploadComponent'].setPageName('position')
        let objData = {
          // 进入哪一个程序
          status: 'add'
        }
        this.$refs.uploadComponent.openOne(objData)
      },
      // 上传前
      beforeAvatarUpload(file) {
        const isJPG = file.path.includes('.ht')
        // const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJPG) {
          this.$message.error('上传的文件后缀名应为 .ht !')
        }
        // if (!isLt2M) {
        //   this.$message.error("上传头像图片大小不能超过 2MB!")
        // }
        return isJPG
        // && isLt2M
      },
      // 手动导入共享包
      async uploadFile(value) {
        try {
          let pat = value.file.path
          let res = await SharedPackage(pat)

          if (!res) {
            this.$message.error('上传失败，请稍后重试！')
            this.$refs.imgRef.clearFiles()
            return
          }
          if (res.code === 200) {
            this.$message.success('导入成功！')
            this.getList()
          } else {
            const h = this.$createElement

            let newDatas = []
            let data = res.message.split('|')
            for (let i in data) {
              newDatas.push(h('p', null, data[i]))
            }
            this.$notify({
              title: '导入错误',
              message: h('div', null, newDatas),
              type: 'error'
            })
          }
          this.$refs.imgRef.clearFiles()
        } catch (err) {
          let errtwo = err
        }
      },
      // 导出
      async exportHandler() {
        try {
          let url = localhostUrl + '/Employee/ExcelFile'
          let xhr = new XMLHttpRequest()
          xhr.open('post', url, true)
          xhr.setRequestHeader('content-type', 'application/json')
          xhr.setRequestHeader('Authorization', `Bearer ${getToken()}`)
          xhr.responseType = 'blob' // 返回类型blob  blob 存储着大量的二进制数据
          xhr.onload = function () {
            if (this.status === 200) {
              let blob = this.response
              let reader = new FileReader()
              reader.readAsDataURL(blob) // 转换为base64，可以直接放入a标签href
              reader.onload = function (e) {
                var a = document.createElement('a') // 转换完成，创建一个a标签用于下载
                a.download = parseTime(new Date().getTime(), '{y}-{m}-{d}') + '员工列表' + '.xls'
                a.href = e.target.result
                document.body.appendChild(a) // 修复firefox中无法触发click
                a.click()
                document.body.removeChild(a)
              }
            }
          }
          xhr.send(JSON.stringify(Object.assign(this.previousQuery, { pageIndex: 1, pageSize: 1e9 }))) // 发送ajax请求
        } catch (err) {
          this.$message.error('导出失败！')
        }
      },
      // 批量导出
      handleOut() {
        this.exportHandler()
      },
      // 启用禁用门禁
      async setEmployeeHandle(value, flag) {
        let font = ''
        if (flag) {
          font = '禁用后，当前员工将无法通过人员闸机通道，是否禁用？'
        } else {
          font = '启用后，当前员工将可以通过人员闸机通道，是否启用？'
        }
        this.$confirm(font, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          try {
            let res = await setEmployee('POST', {
              employeeId: value.id,
              isEnable: !value.isEnable
            })
            if (res.code !== 200) {
              return
            }
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getList(this.serchObj)
          } catch (err) {
            this.$message.error('操作失败！')
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      // 获取表头
      async getParameter(fn) {
        let res = await parameter('get', { parameterName: 'TableConfig' })
        fn(res)
      },
      // 设置表头
      setTableColHandler(value) {
        this.tabList = [{ type: 'selection' }, ...value]

        this.tableColValue = value

        // 如果没有这个文件就创建文件

        // fs.writeFile(dirname + '\\tableCol.txt', JSON.stringify(value), (error, res) => {
        //   console.log(error, res)
        // })
      },
      // 选择表单字段
      addHandle() {
        let objData = {
          // 进入哪一个程序
          status: 'add'
        }
        this.$refs.ListFields.openOne(objData)
        this.$refs.ListFields.selectionChange(this.tableColValue)
      },
      // 部门
      async dptHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await department('post', obj, false)
          if (res.code === 200) {
            this.dptList = [{
              label: '空',
              value: '空'
            }]
            // this.dptList = []
            res.data.items.map(item => {
              this.dptList.push({
                label: item.deptName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.dptList = []
        }
      },
      // 职位
      async jobHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await job('post', obj, false)
          if (res.code === 200) {
            this.jobList = [{
              label: '空',
              value: '空'
            }]
            // this.jobList = []
            res.data.items.map(item => {
              this.jobList.push({
                label: item.jobTitle,
                value: item.id,
                department: item.department
              })
            })
          }
        } catch (err) {
          this.jobList = []
        }
      },
      // 工种
      async workHandler() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let res = await work('post', obj, false)
          if (res.code === 200) {
            this.workList = [{
              label: '空',
              value: '空'
            }]
            // this.workList = []
            res.data.items.map(item => {
              this.workList.push({
                label: item.workName,
                value: item.id
              })
            })
          }
        } catch (err) {
          this.workList = []
        }
      },
      // 查询部门，职位，工种
      async threeList(fn) {
        await this.jobHandler()
        await this.dptHandler()
        await this.workHandler()
        this.$nextTick(() => {
          this.topFilter = {
            departmentId: {
              label: '部门',
              placeholder: '请选择员工部门',
              type: 'select',
              arr: this.dptList
            },
            jobId: {
              label: '职位',
              placeholder: '请选择员工职位',
              type: 'select',
              arr: this.jobList
            },
            workId: {
              label: '工种',
              placeholder: '请选择员工工种',
              type: 'select',
              arr: this.workList
            },
            status: {
              label: '工作状态',
              placeholder: '请选择工作状态',
              type: 'select',
              arr: [
                { label: '在职', value: '1' },
                { label: '离职', value: '0' }
              ]
            },
            keyword: {
              label: '关键字',
              placeholder: '请输入员工编码或姓名、RFID、门禁ID'
            }
          }
        })
      },
      // 打开上传头像组件
      addHeadPortrait() {
        let objData = {
          // 进入哪一个程序
          status: 'add'
        }
        this.$refs.HeadPortrait.openOne(objData)
      },
      // 批量删除
      batchDeletion() {
        if (!this.deleteList.id) {
          this.$message.warning('请选择要删除的数据！')
          return
        }
        this.$_delConfirm('选中员工', () => {
          this.delRowReq(this.deleteList)
        })
      },
      // 选中事件
      handleSelectionChange(event) {
        this.selectionList = event
        if (event.length > 0) {
          let ary = []
          event.forEach(item => {
            ary.push(item.id)
          })
          if (ary.length > 1) {
            this.deleteList.id = ary.join(',')
          } else {
            this.deleteList.id = ary[0]
          }
        } else {
          this.deleteList.id = ''
        }
      },
      order(a, b) {
        a.employeeCode = Number(a.employeeCode)
        b.employeeCode = Number(b.employeeCode)

        if (a.employeeCode < b.employeeCode) {
          return -1
        } else if (a.employeeCode > b.employeeCode) {
          return 1
        } else if (a.employeeCode == b.employeeCode) {
          return 0
        }
      },
      // 请求列表数据
      async getList(query) {
        this.tableLoading = true
        try {
          let obj = query || { pageIndex: 1, pageSize: 10, orderBy: 'name' }
          obj.orderBy = 'name'
          obj.orderByAscent = true
          this.previousQuery = obj
          if (obj.search) {
            // 如果选择空数据，需设置值为null
            obj.search.forEach((edit, index) => {
              if (edit.key === 'departmentId' && edit.value === '空') {
                edit.value = null
              } else if (edit.key === 'jobId' && edit.value === '空') {
                edit.value = null
              } else if (edit.key === 'workId' && edit.value === '空') {
                edit.value = null
              }
            })
          }
          const {
            data: { items: resData, count, pageIndex }
          } = await employee('post', obj, false)
          this.tableData = []
          this.tableData = resData.map((item, index) => {
            item.indexId = index + 1
            item.loadingEdit = false
            item.loadingDel = false
            item.isEnable ? (this.isEnableSwitch = true) : (this.isEnableSwitch = false)
            return item
          })

          // this.tableData.sort(this.order)
          this.$nextTick(() => {
            this.$refs['RefListTable'].update({ page: pageIndex, count })
            this.tableLoading = false
          })
        } catch (err) {
          this.tableLoading = false
          this.tableData = []
        }
      },
      async afterEditSuccess() {
        this.getList(this.serchObj)
      },
      handleAdd() {
        let objData = {
          // 进入哪一个程序
          status: 'add',
          apiKey: {
            add: '/Employee', // 添加
          }
        }
        this.$refs['RefAccountsEdit'].openOne(objData)
        this.$refs['RefAccountsEdit'].getList()
        this.$refs['RefAccountsEdit'].getMaxId()
      },
      handleRowEdit(row) {
        this.$refs['RefAccountsEdit'].getList()
        let objData = {
          // 进入哪一个程序
          status: 'edit',
          // 源数据
          row: row,
          // 源id
          id: row.id,
          // 查询参数
          searchData: {
            url: '/Employee/' + row.id,
            method: 'GET',
            params: null
          }
        }
        this.$refs['RefAccountsEdit'].openOne(objData)
      },
      async delRowReq(row) {
        try {
          const obj = { id: row.id, value: null }
          await employee('delete', obj, true)
          row.loadingDel = false
          this.getList(this.serchObj)
          this.$message({
            type: 'success',
            message: '删除成功'
          })
        } catch (err) {
          row.loadingDel = false
          this.$message({
            type: 'error',
            message: '删除失败'
          })
        }
      },
      handleRowDel(row) {
        row.loadingDel = true
        this.$_delConfirm(
          '该员工',
          () => {
            this.delRowReq(row)
          },
          () => {
            row.loadingDel = false
          }
        )
      }
    }
  }
</script>

<style lang="scss" scoped>
  a {
    text-decoration: none;
  }
  /*正常的未被访问过的链接*/
  a:link {
    text-decoration: none;
  }
  /*已经访问过的链接*/
  a:visited {
    text-decoration: none;
  }
  /*鼠标划过(停留)的链接*/
  a:hover {
    text-decoration: none;
  }
  /* 正在点击的链接*/
  a:active {
    text-decoration: none;
  }
  .download {
    color: #fff;
    font-size: 14px;
    display: inline-block;
    padding: 10px 20px;
    background-color: #586aa6;
    margin: 0 10px;
    border-radius: 3px;
  }
  .btn-nav {
    width: 110px;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
  }
  .el-button--text {
    margin-right: 16px !important;
    margin-left: -7px !important;
  }
</style>
